<template>
	<view class="body">
		<view class="warning" v-if="!userType">为了保障物品运输，寄件须实名认证。<text @click="handleReal">立即实名</text></view>
		<view class="topbar">
			<view class="item">
				<view class="left">寄</view>
				<view class="right">
					<view class="top">
						<view class="title">
							<input type="text" placeholder="请输入姓名" v-model="submitForm.sender_name">
						</view>
						<view class="phone">
							<input type="number" maxlength="11" placeholder="请输入手机号"
								v-model="submitForm.publisher_phone">
						</view>
					</view>
					<view class="center">
						<input type="text" placeholder="请输入详细地址" v-model="submitForm.pickup_location">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">收</view>
				<view class="right">
					<view class="top">
						<view class="title">
							<input type="text" placeholder="请输入姓名" v-model="submitForm.receiver_name">
						</view>
						<view class="phone">
							<input type="text" placeholder="请输入手机号" v-model="submitForm.receiver_phone">
						</view>
					</view>
					<view class="center">
						<input type="text" placeholder="请输入详细地址" v-model="submitForm.delivery_location">
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="li">
				<view class="label">上门取件时间</view>
				<view class="value" @click="handleTime(1)">
					<text>{{submitForm.pickup_time || '请选择'}}</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="li">
				<view class="label">期望交货时间</view>
				<view class="value" @click="handleTime(2)">
					<text>{{submitForm.delivery_time || '请选择'}}</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="li">
				<view class="label">物品描述</view>
				<view class="value">
					<input type="text" placeholder="物品描述" v-model="submitForm.cargo_info">
				</view>
			</view>
			<view class="li">
				<view class="label">重量</view>
				<view class="value">
					<input type="text" placeholder="重量" v-model="submitForm.weight">KG
				</view>
			</view>
			<view class="li">
				<view class="label">尺寸</view>
				<view class="value" @click="handleSize">
					<text>{{goodSize || '请选择'}}</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="li li_">
				<view class="label">图片</view>
				<view class="value">
					<view class="img">
						<view class="img-list" v-if="submitForm.cargo_image_url">
							<view class="image">
								<image :src="submitForm.cargo_image_url" />
							</view>
							<view class="del-img" @click.stop="handleDel(i, item)">
								<u-icon size="30" name="close-circle-fill"></u-icon>
							</view>
						</view>
						<view class="upload-img" @click="handleUpload" v-else>
							<uni-icons type="camera-filled" size="40"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="li li_">
				<view class="label">备注</view>
				<view class="value">
					<textarea placeholder="备注" v-model="submitForm.remarks"></textarea>
				</view>
			</view>
			<view class="li">
				<view class="label">赏金</view>
				<view class="value">
					<input style="font-size: 36upx;color: #ff0000;" type="number" placeholder="￥0.00"
						v-model="submitForm.reward_amount">
				</view>
			</view>
		</view>
		<view class="submit" @click="handleSubmit">发布</view>
		<!-- 取件时间 -->
		<u-picker mode="time" v-model="showPicker" :params="params" @confirm="handleDate"></u-picker>
		<!-- 尺寸 -->
		<u-select v-model="showModel" :list="modelList" @confirm="handleConfirm"></u-select>
		<!-- 发布成功 -->
		<u-popup v-model="showPopup" mode="center" width="80%" height="40%" border-radius="20">
			<view class="popup">
				<u-icon name="checkmark-circle-fill" color="#19be6b" size="200"></u-icon>
				<view class="text">{{submitForm.cargo_info}}，发布成功！</view>
			</view>
			<view class="footer">
				<view class="btn" @click="handleAgain">再次发布</view>
				<view class="btn btn2" @click="handleInfo">查看悬赏</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import App from '@/App.vue'
	export default {
		data() {
			return {
				showPicker: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				showModel: false,
				modelList: [{
						value: '1',
						label: '小（<=15*15*15cm）'
					},
					{
						value: '2',
						label: '中（约35*35*35cm）'
					},
					{
						value: '3',
						label: '大（约55*55*55cm）'
					},
					{
						value: '4',
						label: '巨大（>=75*75*75cm）'
					}
				],
				showPopup: false,
				timeType: "",
				fileList: [],
				submitForm: {
					publisher_id: "",
					pickup_time: "",
					dimensions: "",
					prepaid_reward: true,
					compensation_amount: "0",
					delivery_time: "",
					cargo_image_url:"",
				},
				goodSize: "",
				info: {},
				userType: false,
			}
		},
		onLoad(options) {
			console.log(options);
			this.submitForm.publisher_id = uni.getStorageSync('userInfo').rid
		},
		onShow() {
			this.userType = uni.getStorageSync('userInfoIs_auth')
		},
		methods: {
			//立即实名
			handleReal() {
				uni.navigateTo({
					url: "/pages/publish/realName"
				})
			},
			//打开时间选择器
			handleTime(type) {
				this.timeType = type
				this.showPicker = true
			},
			//选择确定日期
			handleDate(e) {
				if (this.timeType == 1) {
					this.submitForm.pickup_time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
				} else if (this.timeType == 2) {
					this.submitForm.delivery_time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
				}
				this.showPicker = false
			},
			//打开尺寸
			handleSize() {
				this.showModel = true
			},
			//尺寸
			handleConfirm(e) {
				if (e[0].value == 1) {
					this.$set(this.submitForm, 'dimensions', '15*15*15')
				} else if (e[0].value == 2) {
					this.$set(this.submitForm, 'dimensions', '35*35*35')
				} else if (e[0].value == 3) {
					this.$set(this.submitForm, 'dimensions', '55*55*55')
				} else if (e[0].value == 4) {
					this.$set(this.submitForm, 'dimensions', '75*75*75')
				}
				this.goodSize = e[0].label
			},
			//上传图片
			handleUpload() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 compressed压缩 original原图
					sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机  'album',
					success(res) {
						uni.showLoading({
							title: "正在上传……",
						});
						uni.uploadFile({
							url: App.globalData.requestUrl + '/api/resource/upload/',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'category': 'image'
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								let imageUrl = JSON.parse(uploadFileRes.data).result.path
								that.submitForm.cargo_image_url = App.globalData.requestUrl + '/media/' + imageUrl
								// that.getImg(imageUrl)
							}
						});
					}
				});
			},
			//获取图片
			// getImg(imageUrl) {
			// 	this.$Api.getImg(imageUrl).then(res => {
			// 		console.log('获取图片', res)
			// 	}, err => {
			// 		console.log(err)
			// 	})
			// },
			//删除图片
			handleDel(i, item) {
				this.fileList.splice(i, 1)
			},
			//发布
			handleSubmit() {
				if (!this.userType) {
					this.$refs.uToast.show({
						title: "为了保障物品运输，寄件须实名认证！",
						type: 'error',
					})
					return
				} else {
					let msg = ''
					if (this.submitForm.reward_amount == '') {
						msg = '请输入赏金'
					}
					if (this.submitForm.remarks == '') {
						msg = '请输入备注'
					}
					if (this.submitForm.cargo_image_url == '') {
						msg = '请上传图片'
					}
					if (this.goodSize == '') {
						msg = '请选择尺寸'
					}
					if (this.submitForm.weight == '') {
						msg = '请输入重量'
					}
					if (this.submitForm.cargo_info == '') {
						msg = '请输入物品描述'
					}
					if (this.submitForm.delivery_time == '') {
						msg = '请选择期望交货时间'
					}
					if (this.submitForm.pickup_time == '') {
						msg = '请选择上门取件时间'
					}
					if (this.submitForm.delivery_location == '') {
						msg = '请输入收件方详细地址'
					}
					if (this.submitForm.receiver_phone == '') {
						msg = '请输入收件方手机号'
					}
					if (this.submitForm.receiver_name == '') {
						msg = '请输入收件方姓名'
					}
					if (this.submitForm.pickup_location == '') {
						msg = '请输入寄件方详细地址'
					}
					if (this.submitForm.publisher_phone == '') {
						msg = '请输入寄件方手机号'
					}
					if (this.submitForm.sender_name == '') {
						msg = '请输入寄件方姓名'
					}
					if (msg) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						return
					}
				}
				this.$Api.addTask(this.submitForm).then(res => {
					// console.log('提交', res)
					if (res.status == 'success') {
						this.showPopup = true
						this.info = res.result
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					}
				}, err => {
					console.log(err)
				})
			},
			//再次发布
			handleAgain() {
				this.showPopup = false
			},
			//查看悬赏
			handleInfo() {
				this.showPopup = false
				uni.navigateTo({
					url: "/pages/index/info?rid=" + this.info.task_id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 94%;
		background: #fff;
		margin: 30upx auto 10%;
		border-radius: 20upx;
		padding: 30upx;

		.warning {
			text-align: center;
			font-size: 28upx;
			color: #414141;
			border-bottom: 2upx solid #e5e5e5;
			padding-bottom: 30upx;

			text {
				color: #4094ff;
			}
		}

		.topbar {
			.item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-bottom: 2upx solid #e5e5e5;
				padding: 30upx 0;

				&:last-child {
					.left {
						background: #fd6324;
					}
				}

				.left {
					width: 140upx;
					height: 140upx;
					border-radius: 50upx;
					flex-shrink: 0;
					background: #f59935;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 40upx;
					font-weight: bold;
					color: #fff;
				}

				.right {
					flex: 1;
					margin-left: 30upx;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20upx 0;

						.title {
							border-right: 2upx solid #e5e5e5;
						}

						.title,
						.phone {
							width: 48%;

							input {
								width: 100%;
								font-size: 28upx;
								color: #414141;
								border: none;
								outline: none;
								background: none;
							}
						}
					}

					.center {
						border-top: 2upx solid #e5e5e5;
						padding: 20upx 0;

						input {
							width: 100%;
							font-size: 28upx;
							color: #414141;
							border: none;
							outline: none;
							background: none;
						}
					}
				}
			}
		}

		.card {
			.li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				padding: 30upx 0;
				border-bottom: 2upx solid #e5e5e5;

				&.li_ {
					flex-wrap: wrap;

					.label {
						width: 100%;
					}

					.value {
						width: 100%;
						margin-top: 20upx;

						.img {
							width: auto;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							flex-wrap: wrap;
							margin-top: 20upx;

							.img-list {
								width: 200upx;
								height: 200upx;
								position: relative;
								margin-right: 20upx;
								margin-bottom: 20upx;

								&:nth-child(3n) {
									margin-right: 0;
								}

								.image {
									width: 100%;
									height: 100%;
									overflow: hidden;
									border-radius: 20upx;

									image {
										width: 100%;
										height: 100%;
										display: block;
										margin: 0 auto;
									}
								}

								.del-img {
									position: absolute;
									top: -12upx;
									right: -8upx;
								}
							}

							.upload-img {
								width: 200upx;
								height: 200upx;
								background: #e5e5e5;
								border-radius: 20upx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 20upx;
							}
						}

						textarea {
							width: 100%;
							height: 200upx;
							border: 2upx solid #E5E5E5;
							border-radius: 10upx;
							font-size: 28upx;
							padding: 20upx;
						}
					}
				}

				.label {
					color: #999;
				}

				.value {
					color: #414141;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						margin-right: 10upx;
					}

					input {
						width: 100%;
						font-size: 28upx;
						color: #414141;
						border: none;
						outline: none;
						background: none;
						text-align: right;
						margin-right: 10upx;
					}
				}
			}
		}

		.submit {
			width: 100%;
			padding: 30upx 0;
			background: #4094ff;
			border-radius: 60upx;
			text-align: center;
			color: #fff;
			margin-top: 50upx;
		}

		.popup {
			padding: 30upx;
			display: flex;
			align-items: center;
			flex-flow: column;

			/deep/.u-icon--right {
				margin-top: 60upx;
			}

			.text {
				font-size: 32upx;
				font-weight: bold;
				margin-top: 50upx;
			}
		}

		/deep/.uni-scroll-view-content {
			position: relative;
		}

		.footer {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			left: 0;
			bottom: 4%;
			z-index: 110;
			padding: 0 4%;

			.btn {
				width: 48%;
				background: #EAEAEA;
				color: #333;
				border-radius: 60upx;
				padding: 30upx 0;
				text-align: center;
				font-size: 28upx;

				&.btn2 {
					background: #4094ff;
					color: #fff;
				}
			}
		}
	}
</style>